<template>
  <div class="item" v-if="dInfo">
    <div class="bill_img" @click="gotoUrl(domain+'/MinProgram2/Spreadtrum/detail?spreadtrum_id='+dInfo.id)">
      <div class="showday_info"><i class="fa fa-circle" aria-hidden="true" :style="{color:(dInfo.is_in_showday==1?'#7FFF00':'#eee')}">  {{dInfo.showday_info}}</i></div>
      <a :href="domain+'/MinProgram2/Spreadtrum/detail/spreadtrum_id/'+dInfo.id">
        <img :src="domain+'/Uploads'+dInfo.m_path">
      </a>
    </div>

    <div class="guide-con">
      <div class="guide-item" v-for="(v,k) in dInfo.guide_workers">
        <img :src="v.img">
      </div>
    </div>

    <div class="detail">
      <div class="title midfont" style="margin-bottom: .2rem;">{{dInfo.title}}</div>
      <div class="minifont">展览时间：{{dInfo.start_day}} 到 {{dInfo.end_day}}</div>
      <div class="minifont">城市：{{dInfo.province==dInfo.city?dInfo.city:dInfo.province+'/'+dInfo.city}}</div>
      <div class="minifont">展览地点：{{dInfo.show_address}}</div>
      <i class="fa fa-heart" :class="me_is_like==1?'':'fontblack'" @click="dolike"> {{likecount>0?likecount:0}} </i>
    </div>
    <Alert ref="alert"></Alert>
    <OpEditDel v-if="is_me" class="OpEditDel" @editDo="editSpreadtrum(dInfo.id)" @deleteDo="delSpreadtrum(dInfo.id,dInfo.title)"></OpEditDel>
  </div>
</template>
<script type="text/javascript">
import OpEditDel from "../buttons/OpEditDel";
export default {
  props:{
    pInfo:{
      type:[Object,Array],
      default:null
    },
    guideCount:{
      type:Number,
      default:4
    },
    is_me:{
      default:0
    }
  },
  data(){
    return {
      dInfo:this.pInfo,
      me_is_like:0,
      likecount:0
    }
  },
  watch:{
    pInfo(n){
      this.dInfo = n
    }
  },
  mounted(){
    let _this=this
    myjs.checkUserIsLogin(function(data){
      if (_this.dInfo.id) {
        myjs.me_is_like_spreadtrum({spreadtrum_id:_this.dInfo.id},function(data){
          _this.me_is_like = data.status
          _this.getSpreadtrumlikecount(_this.dInfo.id)
        },function(){
          _this.likecount=data.likecount
        })
      }

    })
  },
  methods:{
    getSpreadtrumlikecount(spreadtrum_id){
      let _this=this
      myjs.getSpreadtrumlikecount({spreadtrum_id:spreadtrum_id},function(data){
        _this.likecount=data.likecount
      })
    },
    dolike(){
      let _this=this
      myjs.checkUserIsLogin(function(){
        myjs.slikedo({spreadtrum_id:_this.dInfo.id},function(data){
          if (data.status) {
            _this.me_is_like=data.like
            _this.getSpreadtrumlikecount(_this.dInfo.id)
          }else{
            _this.$refs.alert.show('error',data.info)
          }
        })
      },function(){
        myjs.calllogin()
      })
    },
    editSpreadtrum(id){
      let url = domain + '/MinProgram2/Spreadtrum/upload/spreadtrum_id/'
      window.location.href=url+id
    },
    delSpreadtrum(id,title){
      if (!confirm("确定删除:"+title))return false;
      let _this=this
      myjs.delSpreadtrum({spreadtrum_id:id},function(data){
        _this.dInfo=null
      },function(){
        alert("删除失败")
      })
    },
    gotourl(e){
      myjs.gotourl(e,1)
    }
  },
  components:{
    OpEditDel
  }
}
</script>
<style type="text/css" scoped>
.OpEditDel{height: 1rem;line-height: 1rem}
.item{margin-top: 1rem;background-color: #fff;border-radius: .1rem;width: 100%;box-sizing: border-box;box-shadow: 0 0.05rem 0.2rem rgb(0 0 0 /10%);}
.bill_img{
  position: relative;
  height:6rem;
  overflow:hidden;
  box-sizing: border-box;
}
.bill_img img{width:100%;height: auto;border: 1px solid #eee}
.bill_img .title{
  font-weight: bold;
  width: 100%;
  color: #fff;
  text-indent: .3rem;
  position: absolute;
  bottom:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.2),rgba(0,0,0,.5));
  height: 1rem;line-height: 1rem;
}
.bill_img .showday_info{
  font-weight: bold;
  color: #fff;
  padding: .2rem;
  position: absolute;
  top:0;
  left:0;
  background:rgba(0,0,0,.6);
  border-radius: 0px 0px 10px 0px;
  font-size: .3rem;
}
.guide-con{
  box-sizing: border-box;
  padding: .2rem 0rem;
  display: -webkit-flex;
  display: flex;
  margin-top: .1rem;
  justify-content: space-between;
  overflow: hidden;
}
.guide-con>.guide-item:nth-child(n+5){
  display: none
}
.guide-con>.guide-item{flex:1;text-align: center;
  min-width: 2rem;
  max-width: 2rem;
  min-height: 2rem;
  max-height: 2rem;
}
.guide-con>.guide-item img{
  width: 100%;
  height: 100%
}
.detail{font-size: .4rem;text-indent: 0rem;position: relative;line-height:.6rem;}
.detail .fa-heart{position: absolute;float: right;margin-right: .4rem;bottom:.5rem;right:0rem;font-size:.4rem;}
</style>
